<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>三合一满屏飘屏（表情强化版）</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            margin: 0; 
            padding: 0; 
            overflow: hidden; 
            background: #0a0a1a; /* 更深背景，突出表情 */
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }

        /* 文字飘屏样式 */
        .float-text {
            position: absolute;
            color: #fff;
            font-size: 32px;
            pointer-events: none;
            animation: float linear infinite;
            text-shadow: 0 0 8px rgba(255,255,255,0.5);
        }

        /* 表情飘屏样式 - 强化醒目效果 */
        .float-emoji {
            position: absolute;
            pointer-events: none;
            animation: emojiFloat 5s ease-in-out infinite;
            opacity: 0;
            /* 高亮发光效果，必现关键！ */
            text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
            z-index: 10; /* 层级高于文字和弹幕，优先显示 */
        }

        /* 弹幕飘屏样式 */
        .danmu {
            position: absolute;
            white-space: nowrap;
            color: #fff;
            font-size: 32px;
            padding: 4px 12px;
            border-radius: 20px;
            background: rgba(0,0,0,0.6);
            pointer-events: none;
            animation: danmuScroll linear infinite;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        }

        /* 动画关键帧 */
        @keyframes float {
            to {
                transform: translate(var(--x-end), var(--y-end));
                opacity: 0;
            }
        }

        /* 表情动画 - 强化运动轨迹，更易捕捉 */
        @keyframes emojiFloat {
            0% {
                transform: translateY(100vh) rotate(0deg) translateX(0);
                opacity: 1;
                scale: 1.2; /* 初始放大，更显眼 */
            }
            50% {
                transform: translateY(40vh) rotate(180deg) translateX(40px);
                opacity: 1; /* 中间阶段保持完全不透明 */
                scale: 1.5; /* 中间放大到最大 */
            }
            100% {
                transform: translateY(-50px) rotate(360deg) translateX(-40px);
                opacity: 0;
                scale: 1;
            }
        }

        @keyframes danmuScroll {
            from {
                transform: translateX(100vw);
                opacity: 1;
            }
            to {
                transform: translateX(-100%);
                opacity: 0;
            }
        }

        /* 控制按钮样式 */
        .control-panel {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            display: flex;
            gap: 10px;
        }

        .control-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 20px;
            background: rgba(255,255,255,0.1);
            color: #fff;
            cursor: pointer;
            backdrop-filter: blur(5px);
            transition: all 0.3s ease;
        }

        .control-btn:hover {
            background: rgba(255,255,255,0.2);
            transform: translateY(-2px);
        }

        .control-btn.active {
            background: #ff4d94;
        }
    </style>
</head>
<body>
    <div class="control-panel">
        <button class="control-btn active" data-type="all">全部开启</button>
        <button class="control-btn" data-type="text">仅文字</button>
        <button class="control-btn" data-type="emoji">仅表情</button>
        <button class="control-btn" data-type="danmu">仅弹幕</button>
        <button class="control-btn" data-type="pause">暂停</button>
    </div>

    <script>
        // 配置数据 - 强化表情相关参数
        const config = {
            text: {
                list: ['邦邦生日快乐', '邦邦宝宝最好了', '邦邦最帅', '好喜欢邦邦宝宝', '邦邦宝宝抱抱', '邦邦宝宝举高高', '邦邦硬邦邦'],
                colors: ['#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#0099ff', '#9900ff', '#ff00ff'],
                interval: 300,
                minDuration: 5,
                maxDuration: 15
            },
            emoji: {
                list: ['🎉', '🥳', '🎊', '✨', '🌟', '💖', '💗', '💓', '💝', '💘', '🌈', '🔥', '🎁', '🥰', '😘', '🌸', '💐', '🎈', '🎆', '🎇'],
                colors: ['#ffd700', '#ff69b4', '#00ffff', '#32cd32', '#ff4500', '#9370db', '#ff1493', '#00bfff'], // 表情高亮色
                interval: 200, // 超短间隔，密集生成
                minSize: 40, // 大幅增大尺寸
                maxSize: 80,
                density: 1.2 // 生成密度系数
            },
            danmu: {
                list: ['逆天了', '哟西', '牛逼', '上号', '这不是外挂？', '无敌', '卧槽', '是人握持'],
                bgColors: ['rgba(255,0,0,0.5)', 'rgba(0,255,0,0.5)', 'rgba(0,0,255,0.5)', 'rgba(255,255,0,0.5)'],
                interval: 200,
                minDuration: 3,
                maxDuration: 8
            }
        };

        let state = {
            activeType: 'all',
            timers: { text: null, emoji: null, danmu: null }
        };

        // 文字飘屏（保持不变）
        function createFloatText() {
            const text = document.createElement('div');
            text.className = 'float-text';
            const randomText = config.text.list[Math.floor(Math.random() * config.text.list.length)];
            const randomColor = config.text.colors[Math.floor(Math.random() * config.text.colors.length)];
            text.textContent = randomText;
            text.style.color = randomColor;
            
            const startPos = Math.floor(Math.random() * 3);
            if (startPos === 0) {
                text.style.left = `${Math.random() * 100}vw`;
                text.style.top = '-20px';
            } else if (startPos === 1) {
                text.style.left = '-50px';
                text.style.top = `${Math.random() * 100}vh`;
            } else {
                text.style.right = '-50px';
                text.style.top = `${Math.random() * 100}vh`;
            }
            
            const duration = config.text.minDuration + Math.random() * (config.text.maxDuration - config.text.minDuration);
            text.style.setProperty('--x-end', `${Math.random() * 200 - 100}vw`);
            text.style.setProperty('--y-end', `${Math.random() * 200 - 50}vh`);
            text.style.animationDuration = `${duration}s`;
            
            document.body.appendChild(text);
            setTimeout(() => text.remove(), duration * 1000);
        }

        // 表情飘屏 - 全面强化醒目效果
        function createFloatEmoji() {
            // 增加生成密度（一次可能生成1-2个）
            const count = Math.floor(Math.random() * 2) * config.emoji.density;
            for (let i = 0; i < count; i++) {
                const emoji = document.createElement('div');
                emoji.className = 'float-emoji';
                
                // 随机选择表情和高亮颜色
                const randomEmoji = config.emoji.list[Math.floor(Math.random() * config.emoji.list.length)];
                const randomColor = config.emoji.colors[Math.floor(Math.random() * config.emoji.colors.length)];
                emoji.textContent = randomEmoji;
                emoji.style.color = randomColor; // 表情自身染色，更醒目
                
                // 随机位置（分散分布，避免重叠）
                const randomLeft = Math.random() * 85; // 0-85vw，留出更多空间
                emoji.style.left = `${randomLeft}vw`;
                emoji.style.bottom = '0.5'; // 固定底部起始
                
                // 大幅增大尺寸，确保肉眼可见
                const size = config.emoji.minSize + Math.random() * (config.emoji.maxSize - config.emoji.minSize);
                emoji.style.fontSize = `${size}px`;
                
                // 动画时长适中，运动轨迹清晰
                emoji.style.animationDuration = `${3 + Math.random() * 2}s`; // 3-5秒，更快更易捕捉
                
                // 添加到页面
                document.body.appendChild(emoji);
                
                // 动画结束后移除
                setTimeout(() => {
                    if (emoji.parentNode) emoji.remove();
                }, parseFloat(emoji.style.animationDuration) * 1000);
            }
        }

        // 弹幕飘屏（保持不变）
        function createDanmu() {
            const danmu = document.createElement('div');
            danmu.className = 'danmu';
            const randomText = config.danmu.list[Math.floor(Math.random() * config.danmu.list.length)];
            const randomBg = config.danmu.bgColors[Math.floor(Math.random() * config.danmu.bgColors.length)];
            danmu.textContent = randomText;
            danmu.style.background = randomBg;
            danmu.style.top = `${Math.random() * 90}vh`;
            
            const duration = config.danmu.minDuration + Math.random() * (config.danmu.maxDuration - config.danmu.minDuration);
            danmu.style.animationDuration = `${duration}s`;
            
            document.body.appendChild(danmu);
            setTimeout(() => danmu.remove(), duration * 1000);
        }

        // 控制逻辑（保持不变）
        function startFloat(type) {
            clearAllTimers();
            
            switch(type) {
                case 'all':
                    state.timers.text = setInterval(createFloatText, config.text.interval);
                    state.timers.emoji = setInterval(createFloatEmoji, config.emoji.interval);
                    state.timers.danmu = setInterval(createDanmu, config.danmu.interval);
                    break;
                case 'text':
                    state.timers.text = setInterval(createFloatText, config.text.interval);
                    break;
                case 'emoji':
                    state.timers.emoji = setInterval(createFloatEmoji, config.emoji.interval);
                    break;
                case 'danmu':
                    state.timers.danmu = setInterval(createDanmu, config.danmu.interval);
                    break;
                case 'pause':
                    break;
            }
            
            state.activeType = type;
            updateControlButtons();
        }

        function clearAllTimers() {
            Object.values(state.timers).forEach(timer => {
                if (timer) clearInterval(timer);
            });
            state.timers = { text: null, emoji: null, danmu: null };
        }

        function updateControlButtons() {
            document.querySelectorAll('.control-btn').forEach(btn => {
                btn.classList.toggle('active', btn.dataset.type === state.activeType);
            });
        }

        function bindControlEvents() {
            document.querySelectorAll('.control-btn').forEach(btn => {
                btn.addEventListener('click', () => {
                    startFloat(btn.dataset.type);
                });
            });
        }

        // 初始化
        window.onload = () => {
            bindControlEvents();
            startFloat('all');
        };

        window.onunload = () => {
            clearAllTimers();
        };
    </script>
</body>
</html>